<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/integral/integral_shop.css">
    <title>积分商城-积分明细</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <searchs></searchs>

            <car_box></car_box>

        </div>

        <!-- 商品分类 -->
        <div class="class_box wrap">
            <div class="sub_nav_box">
                <ul class="sub_nav fl">
                    <li class="active">积分商城</li>
                </ul>
            </div>
        </div>

        <div class="shop_mall wrap">
            <a href="integral.html">积分商城</a> &gt; 积分明细
        </div>

        <div class="integral_box wrap">
            <div class="integral_tit">
                <div class="integral_left">说明</div>
                <div class="integral_center">收入/支出</div>
                <div class="integral_right">近三个月订单</div>
            </div>
            <div class="integral_item" v-for='(item,index) in integralDetail'>
                <div class="inturduce integral_left">{{item.description}}</div>
                <div class="get_pay integral_center" v-if="item.integralType==0">
                    + {{item.integral}}
                </div>
                <div class="integral_center pay_integral" v-else-if="item.integralType==1">
                    - {{item.integral}}
                </div>
                <div class="near_month integral_right">{{item.integralTime}}</div>
            </div>



        </div>
        <div class="page_wrap wrap">
            <el-pagination background @current-change="handleCurrentChange" :current-page="currentPage" layout="prev, pager, next" :total="total" class="page_list">
            </el-pagination>
        </div>



       <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>
    
    <script src="../js/axios.js"></script>         
    <script src="../js/qs.js"></script>
    <script src="../js/swiper-4.3.5.min.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    integralDetail:'',
                    car_active:false,
                    groups:3,
                    total:''
                };
            },
            created() {
                
            },
            mounted() {
                this.integralDetails(1)
            },
            methods: {
                // 分页
                handleCurrentChange(page) {
                    console.log(page)
                    app.integralDetails(page)
                }, //改变条数触发
                handleIndexChange(index) {
                    console.log(index)
                },
                // 积分明细
                integralDetails(page){
                    axios({
                        method:"POST",
                        url:base_url + "/integralDetail/list",
                        data:Qs.stringify({
                            timeType:0,
                            pageNum:page,
                            pageSize:10
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        console.log(res.data.data.list.list)
                        app.integralDetail = res.data.data.list.list
                        app.total = res.data.data.list.total
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },


                // 显示购物车               
                go_shop_car(){                     
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                buy_btn:function(){
                    this.popup = true
                },
                concel:function(){
                    this.popup = false
                }
            }
        })
        
    </script>
</body>

</html>